<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style>
    .bootstrap-table,
    .myFull{
        width: 100%;
        height: 100%;
    }
    .fixed-table-toolbar{height: 0px;}
    .fixed-table-container{
        height: calc(100% - 75px);
    }
    .fixed-table-pagination{
        height: 55px;
    }
</style>
<div class="wrapper wrapper-content myFull">
    <div class="col-sm-12 nopadding myFull">
        <div class="ibox myFull">
            <div class="ibox-body myFull">
                <div class="col-sm-12 " style="height: 70px;background-color: #fff; display: flex; align-items: center;">
                    <div class="columns pull-left col-md-2 nopadding">
                        <input id="searchName" type="text" class="form-control"
                               placeholder="请输入名称">
                    </div>
                    <div class="columns pull-left">
                        <button class="btn btn-success" onclick="reLoad()">查询</button>
                    </div>

                </div>
                <div class="fixed-table-toolbar col-sm-12" style="height: 70px;background-color: #fff; display: flex; align-items: center;margin-top: 20px;">
                    <div class="columns pull-left">
                        <button  type="button" class="btn  btn-primary" onclick="add()">
                           新建申报信息
                        </button>
                    </div>
                </div>
                <div class="col-sm-12 " style="height: calc(100% - 160px);background-color: #fff; display: flex; align-items: center;">
                    <table id="exampleTable" data-mobile-responsive="true">
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>


</div>
<div th:include="include :: footer"></div>
<script>

    $(function() {
        load();
    });


    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url :"/jzweb/declareReady/list", // 服务器数据的加载地址
                    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                    //	showRefresh : true,
                    //	showToggle : true,
                    //	showColumns : true,
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    singleSelect : false, // 设置为true将禁止多选
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    //search : true, // 是否显示搜索框
                    showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    queryParamsType : "",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    queryParams : function(params) {
                        return {
                            //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            pageNumber : params.pageNumber,
                            pageSize : params.pageSize,
                            title: $("#searchName").val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    responseHandler : function(res){
                        return {
                            "total": res.data.total,//总数
                            "rows": res.data.records   //数据
                        };
                    },
                    columns : [
                        {
                            field : 'title',
                            title : '申报标题',
                            formatter : function(value, row, index) {
                                return '<a class="" href="#" mce_href="#" title="详情" onclick="Look(\''
                                    + row.id
                                    + '\')">'+row.title+'</a>'
                            }
                        },
                        {
                            field : 'creater',
                            title : '创建人'
                        },
                        {
                            field : 'createrDate',
                            title : '创建时间'
                        },
                        {
                            title : '操作',
                            field : 'id',
                            align : 'center',
                            formatter : function(value, row, index) {
                                var e = '<a class="btn btn-primary btn-sm " style="margin-right: 5px" href="#" mce_href="#" title="编辑" onclick="edit(\''
                                    + row.id
                                    + '\')">编辑</a>';
                                var f = '<a class="btn btn-success btn-sm" href="#" title="详情" style="margin-right: 5px" mce_href="#" onclick="infors(\''
                                    + row.id
                                    + '\')">详情</a>';
                                var d = '<a class="btn btn-warning btn-sm " style="margin-right: 5px" href="#" title="删除"  mce_href="#" onclick="remove(\''
                                    + row.id
                                    + '\')">删除</a>';

                                return e + f + d ;
                            }
                        } ]
                });
    }
    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }

    function Look(id){
        layer.open({
            type : 2,
            title : '编辑申报',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '520px' ],
            content : '/jzweb/declarationManagement/look/' + id // iframe的url
        });
        // layer.full(index);
    }

    //完成新增
    function add() {
        var index =layer.open({
            type : 2,
            title : '新建申报',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '800px' ],
            content :'/jzweb/declarationManagement/add' // iframe的url
        });

        layer.full(index);
    }
    function edit(id) {
        var index=layer.open({
            type : 2,
            title : '编辑申报',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '800px' ],
            content : '/jzweb/declarationManagement/edit/' + id // iframe的url
        });
        layer.full(index);
    }
    function remove(id) {
        layer.confirm('确定要删除选中的记录？', {
            btn : [ '确定', '取消' ]
        }, function() {
            $.ajax({
                url : "/jzweb/declareReady/remove",
                type : "post",
                data : {
                    'id' : id
                },
                success : function(r) {
                    if (r.code==0) {
                        layer.msg(r.msg);

                    }else{
                        layer.msg(r.msg);
                    }
                    reLoad();
                },
                error:()=>{
                    reLoad();
                }
            });
        })
    }

    //详情
    function infors(id) {
       let index=layer.open({
            type : 2,
            title : '申报列表详情',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '100%', '100%' ],
            content : '/jzweb/declarationManagement/infor/'+ id, // iframe的url
           //  success: function(layero) {
           //     console.log('layer-anim-00===》》》》',$('.layer-anim').length,$('.layer-anim-00').length)
           //     //处理layer层中video播放器全屏样式问题
           //     setTimeout(function () {
           //         $(layero).removeClass('layer-anim');
           //         $(layero).removeClass('layer-anim-00');
           //         console.log('处理后面=======5555',$('.layer-anim').length,$('.layer-anim-00').length)
           //     }, 0);
           // }
        });
        layer.full(index);
    }

</script>
</body>
</html>